<template>
  <div class="flowPath-config-container">
    <!-- 顶部查询条件 -->
    <div class="screen-conditions-container">
      <ScreenConditions :isDataType="false">
        <template slot="conditions">
          <!-- 项目名称 -->
          <a-tree-select
            placeholder="请选择项目名称"
            :replaceFields="{
              children: 'child',
              title: 'tenantName',
              key: 'id',
              value: 'tenantCode',
            }"
            tree-default-expand-all
            v-model="conditions.tenantName"
            :tree-data="conditions.tenantSource"
            @change="tenantChange"
          >
          </a-tree-select>
          <!-- 标段名称 -->
          <bjSelect
            :dataResource="conditions.blockNameSource"
            placeholder="请选择标段名称"
            v-model="conditions.blockName"
            :loading="conditions.blockLoading"
            :replaceFields="{ key: 'orgCode', label: 'orgName' }"
            @change="blockChange"
          ></bjSelect>
          <!-- 配置功能 -->
          <bjSelect
            :dataResource="conditions.configSource"
            placeholder="请选择标段名称"
            v-model="conditions.configName"
            :loading="conditions.configLoading"
            :replaceFields="{ key: 'id', label: 'name' }"
            @change="configChange"
          ></bjSelect>
        </template>
        <template slot="operate">
          <a-button type="primary" @click="getTableData"> 查询 </a-button>
        </template>
      </ScreenConditions>
    </div>
    <div class="table-container">
      <div class="header" header="流程配置">
        <a-button
          type="primary"
          v-if="addButton && this.conditions.configName"
          @click="gotoAdd"
        >
          新增
        </a-button>
      </div>
      <div class="main" v-loading="loading">
        <vxe-table
          ref="xTable"
          height="99%"
          class="scrollbarStyle"
          align="center"
          show-overflow
          show-header-overflow
          :data="tableData"
          :column-config="{ resizable: true }"
        >
          <vxe-column type="seq" width="80" title="序号"></vxe-column>
          <vxe-column field="name" title="节点名称"> </vxe-column>
          <vxe-column field="prevnodeDesc" title="前一个节点"> </vxe-column>
          <vxe-column field="nextnodeDesc" title="后一个节点"> </vxe-column>
          <vxe-column field="backnodeDesc" title="打回节点"> </vxe-column>
          <vxe-column field="nodetypeDesc" title="节点类型"> </vxe-column>
          <vxe-column field="sort" title="节点顺序"> </vxe-column>
          <vxe-column field="remark" title="备注"> </vxe-column>
          <vxe-column
            field="operate"
            width="280"
            title="操作"
            fixed="right"
            align="left"
          >
            <template #default="{ row }">
              <div class="text-button-group">
                <a-button
                  type="link"
                  @click="gotoUserConfig(row)"
                  v-if="superButton && row.configure"
                >
                  人员配置
                </a-button>
                <a-button
                  type="link"
                  @click="gotoEdit(row)"
                  v-if="superButton && row.edit"
                >
                  编辑
                </a-button>
                <a-button type="link" @click="gotoDetail(row)"> 查看 </a-button>
                <a-button
                  type="link"
                  @click="handleDelClick(row)"
                  class="danger"
                  v-if="superButton && row.del"
                >
                  删除
                </a-button>
              </div>
            </template>
          </vxe-column>
        </vxe-table>
      </div>
    </div>
    <!-- 人员配置-弹窗 -->
    <userConfigModal :visible.sync="userConfigModalVisible" :modal="modal">
    </userConfigModal>
    <!-- 新增、编辑页面 -->
    <addPage
      :visible.sync="addPageVisible"
      :id="id"
      :workflowid="workflowid"
    ></addPage>
    <!-- 查看页面 -->
    <detailPage
      :visible.sync="detailPageVisible"
      :id="id"
      :workflowid="workflowid"
      :tenantName="detailTenantName"
      :blockName="conditions.blockName"
      :configName="conditions.configName"
    ></detailPage>
  </div>
</template>

<script>
import bjSelect from "@/components/bj-select";
//人员配置-弹窗
import userConfigModal from "./components/userConfigModal";
import { getLoginData } from "@/tools";
import { addAttributeByKey, notificationTip } from "@/utils";
import { getTenantList } from "@/api/user-center/organizationManage.js";
import { getBlockList2 } from "@/api/user-center/equipmentManage.js";
import { getPurView } from "@/api/user-center/userManage.js";
//新增页面
import addPage from "./add.vue";
//查看页面
import detailPage from "./detail.vue";
import {
  getFlowConfigList,
  getAddButtonAuth,
  getTableList,
  getNodeDelete,
} from "@/api/user-center/flowPathConfig.js";
export default {
  components: {
    bjSelect,
    userConfigModal,
    addPage,
    detailPage,
  },
  data() {
    return {
      addPageVisible: false,
      detailPageVisible: false,
      detailTenantName: {},
      id: "",
      workflowid: "",
      //列表
      loading: false,
      tableData: [],
      //顶部筛选条件
      conditions: {
        //项目名称
        tenantName: undefined,
        tenantSource: [],
        //标段
        blockLoading: false,
        blockNameSource: [],
        blockName: undefined,
        //配置功能
        configLoading: false,
        configSource: [],
        configName: undefined,
      },
      //新增按钮权限
      addButton: false,
      //人员配置-弹窗
      userConfigModalVisible: false,
      modal: {
        id: "",
        title: "",
        workflowid: "",
      },
      //项目名字
      treeLabel: "",
      //超管按钮权限
      superButton: false,
    };
  },
  mounted() {
    this.loading = true;
    this.getPurviewFlag();
    this.getAddAuth();
    this.getProjectList();
  },
  methods: {
    //新增
    gotoAdd() {
      this.id = "";
      this.workflowid = this.conditions.configName?.key || "";
      this.addPageVisible = true;
    },
    //编辑
    gotoEdit(row) {
      this.id = row.id;
      this.workflowid = this.conditions.configName?.key || "";
      this.addPageVisible = true;
    },
    //详情
    gotoDetail(row) {
      let { tenantName } = this.conditions;
      let { treeLabel } = this;
      this.id = row.id;
      this.detailTenantName = { key: tenantName, label: treeLabel };
      this.detailPageVisible = true;
      //   this.$router.push({
      //     path: `/nebula/quality-app/processes/flowPathConfig/detail`,
      //     query: {
      //       id: row.id,
      //       tenantName: { key: tenantName, label: treeLabel },
      //       blockName,
      //       configName,
      //     },
      //   });
    },
    //人员配置
    gotoUserConfig(row) {
      this.userConfigModalVisible = true;
      this.modal = {
        tenantCode: row.tenantCode,
        name: row.name,
        id: row.id,
      };
    },
    //查询超管权限
    getPurviewFlag() {
      getPurView()
        .then((res) => {
          this.superButton = res?.data?.result || false;
        })
        .catch((_) => {
          this.superButton = false;
        });
    },

    //查询新增按钮-权限
    getAddAuth() {
      return new Promise((resolve, reject) => {
        getAddButtonAuth()
          .then((res) => {
            let { data } = res;
            this.addButton = data?.result || false;
            resolve();
          })
          .catch((_) => {
            this.addButton = false;
            reject();
          });
      });
    },
    //查询项目名称-下拉框
    getProjectList() {
      return new Promise((resolve, reject) => {
        let { userId } = getLoginData();
        getTenantList({ userId })
          .then((res) => {
            let { data } = res;
            let tree = data?.result || [];
            this.conditions.tenantSource = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              tree,
              "child"
            );
            let { tenantCode = "", tenantName = "" } = JSON.parse(
              localStorage.getItem("ORGANIZATION") || "{}"
            );
            this.conditions.tenantName = tenantCode;
            this.treeLabel = tenantName;
            this.getSectionList();
            resolve();
          })
          .catch((_) => {
            this.conditions.tenantName = undefined;
            this.conditions.tenantSource = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //项目选择
    tenantChange(value, label, extra) {
      this.treeLabel = label;
      this.conditions.blockName = undefined;
      this.conditions.configName = undefined;
      this.getSectionList();
      this.getConfigList();
    },
    //查询标段-下拉框
    getSectionList() {
      this.conditions.blockLoading = true;
      return new Promise((resolve, reject) => {
        let { userId } = getLoginData();
        let { tenantName } = this.conditions;
        getBlockList2({ userId, tenantCode: tenantName ? tenantName : "" })
          .then((res) => {
            let { data } = res;
            this.conditions.blockNameSource = data?.result || [];
            if (this.conditions.blockNameSource?.[0]?.orgCode) {
              this.conditions.blockName = {
                key: this.conditions.blockNameSource?.[0]?.orgCode,
                label: this.conditions.blockNameSource?.[0]?.orgName,
              };
            } else {
              this.conditions.blockName = undefined;
            }
            this.getConfigList();
            resolve();
          })
          .catch((_) => {
            this.conditions.blockNameSource = [];
            this.conditions.blockName = undefined;
            reject();
          })
          .finally((_) => {
            this.conditions.blockLoading = false;
          });
      });
    },
    //选择标段
    blockChange(ev) {
      this.conditions.blockName = ev;
      this.conditions.configName = undefined;
      this.getConfigList();
    },
    //查询配置功能-下拉框
    getConfigList() {
      this.conditions.configLoading = true;
      return new Promise((resolve, reject) => {
        let { tenantName, blockName } = this.conditions;
        getFlowConfigList({
          orgCode: blockName?.key || "",
          tenantCode: tenantName ? tenantName : "",
        })
          .then((res) => {
            let { data } = res;
            this.conditions.configSource = data?.result || [];
            if (this.conditions.configSource?.[0]?.id) {
              this.conditions.configName = {
                key: this.conditions.configSource?.[0]?.id,
                label: this.conditions.configSource?.[0]?.name,
                // key: 30,
                // label: "工序报验",
              };
            } else {
              this.conditions.configName = undefined;
            }
            //查询列表
            this.getTableData();
            resolve();
          })
          .catch((_) => {
            this.conditions.configSource = [];
            this.conditions.configName = undefined;
            reject();
          })
          .finally((_) => {
            this.conditions.configLoading = false;
          });
      });
    },
    //选择配置功能
    configChange(ev) {
      this.conditions.configName = ev;
      this.getTableData();
    },
    //查询列表
    getTableData() {
      this.loading = true;
      return new Promise((resolve, reject) => {
        let { tenantName, blockName, configName } = this.conditions;
        getTableList({
          tenantCode: tenantName ? tenantName : "",
          orgCode: blockName?.key || "",
          workflowid: configName?.key || "",
        })
          .then((res) => {
            let { data } = res;
            this.tableData = data?.result || [];
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },
    //删除
    handleDelClick(row) {
      let that = this;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定删除所选内容?",
        content: "删除内容后,将无法恢复。",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#FB5A5A",
          }),
        onOk() {
          getNodeDelete({ id: row.id })
            .then((res) => {
              notificationTip("success", "节点删除成功！");
              that.getTableData();
            })
            .catch();
        },
        onCancel() {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
.flowPath-config-container {
  box-sizing: border-box;
  height: 100%;
  .flex();
  flex-direction: column;
  padding: 0 0 10px 10px;
  overflow: hidden;
  .table-container {
    margin: 10px 0px 0 0;
    flex: 1;
    .flex();
    flex-direction: column;
    background-color: #fff;
    .header {
      padding: 12px 20px;
      background-color: #fff;
      box-sizing: border-box;
      .flex();
      justify-content: space-between;
      align-items: center;
      &::before {
        content: attr(header);
        height: 18px;
        border-left: 3px solid var(--primary-color);
        padding-left: 10px;
        font-size: 18px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #525a5d;
        line-height: 18px;
      }
    }
    .main {
      flex: 1;
      height: 100%;
    }
    .pager-container {
      flex-shrink: 0;
    }
  }
}
</style>
